import React from 'react';
import {
  View,
  Text,
} from 'react-native';


import BasePage from '../common/BasePage';
import CommonTabView from '../common/CommonTabView';
import SizeUtils from '../../common/SizeUtils';
import Config from '../../config';
import JifenMallRequestMyDuihuanAction from '../../actions/jifenmall/JifenMallRequestMyDuihuanAction';
import TImage from '../../components/TImage';
import JifenMallConstants from '../../common/JifenMallConstants';

const TOP_BUTTON = [
    {type:"time", buttonLabel:"时间排序"},
    {type:"jifen", buttonLabel:"积分排序"},
  ];

export default class JifenMyDuihuanPage extends BasePage {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View style={{width:SizeUtils.getWindowSize().width,
          height:SizeUtils.getWindowSize().height}}>
        <View style={{paddingTop:Config.paddingTop}}>
          <CommonTabView
            style={{width:SizeUtils.getWindowSize().width,
              height:SizeUtils.getWindowSize().height - Config.paddingTop -SizeUtils.translateDesignHeightToCode(20),}}
            tabDatas = {TOP_BUTTON}
            onPageViewPressItem = {this._onPressItem.bind(this)}
            onPageViewRenderItem = {this._onRenderItem.bind(this)}
            onPageViewRequestData = {this._requestData.bind(this)}/>
        </View>
        {this._renderNavigationBar()}
      </View>
    )
  }

  _onRenderItem(data, index, tabData) {
    return (
      <View style={{flexDirection:"column",
          width:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(80),
          height:SizeUtils.translateDesignHeightToCode(224),
          borderColor:"#eeeeee", borderBottomWidth:SizeUtils.translateDesignNumToCode(3),
          paddingTop:SizeUtils.translateDesignHeightToCode(42),
          marginLeft:SizeUtils.translateDesignHeightToCode(40),
          marginRight:SizeUtils.translateDesignHeightToCode(40),
          }}>
        <Text style={{color:"#949494", fontSize:SizeUtils.translateFontSizeToCode(26)}}>
          订单编号:{data.item_record_id}
        </Text>
        <View style={{marginTop:SizeUtils.translateDesignHeightToCode(28),
            flexDirection:"row"}}>
          <TImage source={{uri:data.image_url}} style={{width:99, height:99}}
              isMini={true} resizeMode={"contain"}/>
          <View style={{flex:1, flexDirection:"column", paddingLeft:SizeUtils.translateDesignWidthToCode(28),
              paddingTop:SizeUtils.translateDesignHeightToCode(7)}}>
            <View style={{flex:1, flexDirection:"row", alignItems:"center",
                justifyContent:"space-between"}}>
              <Text style={{color:"#2e2e2e", fontSize:SizeUtils.translateFontSizeToCode(30)}}>
                {data.name}
              </Text>
              <Text style={{color:"#999999", fontSize:SizeUtils.translateFontSizeToCode(28)}}>
                共{data.buy_num}件
              </Text>
            </View>
            <View style={{flex:1, flexDirection:"row", alignItems:"center",
                justifyContent:"space-between"}}>
              <Text style={{color:"#db3232", fontSize:SizeUtils.translateFontSizeToCode(26)}}>
                发货状态: {JifenMallConstants.DELIVERY_STATE.valueText[data.delivery]}
              </Text>
              <Text style={{color:"#2e2e2e", fontSize:SizeUtils.translateFontSizeToCode(28)}}>
                实际支付: {data.price * data.buy_num}积分
              </Text>
            </View>
          </View>
        </View>
      </View>
    )
  }

  _onPressItem(data) {
    this.gotoPage(Config.pages.jifenmall_duihuan_item_content, {itemData:data});
  }

  _requestData(page, listView, tabData) {
    if(tabData.type == "time") {
      new JifenMallRequestMyDuihuanAction().call(listView, {page:page, page_size:10, sort_id:3})
    }
    else if(tabData.type == "jifen") {
      new JifenMallRequestMyDuihuanAction().call(listView, {page:page, page_size:10, sort_id:2})
    }
  }
}
